<div fxLayout="column" class="App">
    <gd-title-bar></gd-title-bar>
    <!-- Render app menu when platform is WIN32 -->
    <div fxLayout fxFlex="1 0 auto" class="App__container">
        <gd-app-layout-sidenav fxFlex="0 0 auto" [outlets]="sidenavOutlets" class="App__aside"></gd-app-layout-sidenav>
        <main fxFlex="1 1 auto" fxLayout="column" class="App__content">
            <gd-note-header></gd-note-header>
            <div fxLayout
                 [ngClass]="'App__sections--' + (noteEditorViewModeAsClassName | async)"
                 class="App__sections">
                <section>
                    <gd-note-editor></gd-note-editor>
                </section>
                <section>
                    <gd-note-preview></gd-note-preview>
                </section>
            </div>

            <div fxLayout fxLayoutAlign="center center"
                 *ngIf="noSelectedNote | async" class="App__noSelectedNote">
                <p>No Note Selected</p>
            </div>
        </main>
    </div>
</div>
